<template>
    <!-- 搜索 -->
    <el-card shadow="never" style="margin-bottom: 14px;" :body-style="{ paddingBottom: '2px' }">

        <el-form   :inline="true">
            
            <el-form-item label="按钮名称">
                <el-input style="width: 250px;" placeholder="请输入按钮名称">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button        type="primary">查询</el-button>
            </el-form-item>
        </el-form>

    </el-card>






    <!-- 表格 ---按钮-->
    <el-card shadow="never">
        <div style="margin-bottom: 14px;">
            <el-button type="primary" @click=" dialogOpen = true">添加菜单</el-button>
        </div>
        <!-- 表格 ---渲染-->
        <BaseTable :data="tableData.rows" :total="tableData.total" :columns="columns" v-model="pageData">
            <template #icon="{ row }">
                <el-icon>
                    <component :is="(icons as any)[row.icon]"></component>
                </el-icon>
            </template>


            <template #type="{ row }">
                <el-tag v-if="row.type == 'menu'" type="primary">菜单</el-tag>
                <el-tag v-if="row.type == 'button'" type="warning">按钮</el-tag>
            </template>


            <template #show="{ row }">
                <el-switch v-model="row.show" inline-prompt active-text="显示" inactive-text="隐蔽" />
            </template>
            <template #action="{ row }">
                <a href="#" style="margin-right: 10px;" @click="onOpenUpdateDialog(row)">编辑</a>
                <a href="#" @click.prevent="deleteConfirm(row._id)">删除</a>
            </template>



        </BaseTable>
    </el-card>
    <PermissionDialog v-model="dialogOpen" :updateItem="updateItem" @getMenusData="getMenusData" />
</template>

<script setup lang="ts">
import * as icons from '@element-plus/icons-vue';
import { onMounted, reactive } from 'vue';
import api from '@/api';
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import PermissionDialog from './PermissionDialog.vue';
import MenuItem from 'element-plus/es/components/menu/src/utils/menu-item.mjs';
const columns = [
    { label: '菜单名称', prop: 'title' },
    { label: '菜单图标', prop: 'icon' },
    { label: '菜单类型', prop: 'type' },
    { label: '路由路径', prop: 'path' },
    { label: '组件路径', prop: 'component' },
    { label: '排序', prop: 'order' },
    { label: '是否显示', prop: 'show' },
    { label: '操作', prop: 'action' },
]
let tableData = reactive({
    rows: [],
    total: 0
})

const dialogOpen = ref(false)
let updateItem = ref({})

let pageData = ref({
    currentPage: 1,
    pageSize: 10
})



onMounted(() => {
    getMenusData();
})
const getMenusData = async () => {
    let res = await api.menus.search({
        ...pageData.value,
        creator: 'huangyuling'
    });
    if (res.code == 200) {
        console.log(res.data);
        tableData.rows = res.data.rows;
        tableData.total = res.data.total;
    }
}




// 打开修改弹窗
let onOpenUpdateDialog = (row: MenuItem) => {
    dialogOpen.value = true;
    //弹窗的状态打开
    updateItem.value = row;
}





//确认前删除
let deleteConfirm = (_id: string) => {
    ElMessageBox.confirm(
        '数据删除后不可恢复，确认删除',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            //确认删除
            handleDelete(_id)
        })

        .catch(() => { })


}

//删除
let handleDelete = (_id: string) => {
    console.log(3333);

    api.menus.remove({
        _id,
        creator: 'huangyuling'
    }).then(res => {
        // console.log(res);
        if (res.code == 200) {
            ElMessage.success('用户删除成功');
            getMenusData()
        } else {
            ElMessage.error(res.message)
        }

    })
}







</script>

<style scoped></style>